<template>
  <div class="dice">
    <div class="row">
      <span 
        class="icon button-unselected" 
        v-for="(item) in numbers" 
        :class="dices.selected ? 'active' : ''"
        :key="item.id">
        <i 
          class="iconfont" 
          :class="classNames(dices.icon, dices.color)">
        </i>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dices: {
      type: Object, 
      default: function() {
        return  {
          id: 1,
          number: '1,1,1',
          color: 'red',
          icon: 'iconshaizi_one',
          selected: false
        }
      }
    },
    pIndex: {
      type: Number,
      default: 0
    }
  },
  created() {
  },
  methods: {
    // 添加颜色，选中类名
    classNames(icon, color) {
      let classList = []
      if(icon) {
        classList.push(icon)
      } 
      if (color) {
        classList.push(color)
      }
      return classList.join(' ')
    },
  },
  computed: {
    numbers() {
      return this.dices.number.split(',')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .dice 
    display flex
    .row
      display flex  
      .icon 
        width 38px 
        height 39px
        line-height 37px
        text-align center
        display inline-block
        margin-right 5px
        box-sizing border-box
        cursor pointer
        border-radius 10px
        &.active 
          border 1px solid $color-theme-red
          background $color-theme-red
          color #fff
          box-sizing border-box
          .iconfont 
            color #fff
            &.red 
              color #fff
        &:last-child 
          margin-right 0
        .iconfont 
          font-size 36px
          &.red 
            color $color-theme-red
</style>